import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { css } from "@emotion/react"
import { useCountDown } from "@/features/useCountDown"
import { useNavigate } from "react-router-dom"
import { useCallback } from "react"
import { PATHS } from "@/constants/path"
import Image from "@/components/base/Image"
import MarginTopBlock from "@/components/base/MarginTopBlock"

export default function StepKycSuccess() {
    const navigate = useNavigate()

    const goHome = useCallback(() => {
        navigate(PATHS.INDEX)
    }, [navigate])

    const { count: countDownSeconds, isEnd: isCountDownEnd } = useCountDown(5)

    return (
        <div
            css={css`
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                padding: 0 24rem;
            `}
        >
            <MarginTopBlock top={96} />
            <div
                css={css`
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 200rem;
                    height: 200rem;
                    align-self: center;
                    user-select: none;
                    pointer-events: none;
                `}
            >
                <Image
                    css={css`
                        width: 327rem;
                        height: 327rem;
                    `}
                    src="kyc/success.webp"
                />
            </div>
            <h2
                css={css`
                    font-weight: 600;
                    font-size: 20rem;
                    line-height: 32rem;
                    letter-spacing: 0%;
                    text-align: center;
                    vertical-align: middle;
                    text-transform: capitalize;
                    user-select: none;
                    pointer-events: none;
                `}
            >
                Submit successfully
            </h2>
            <p
                css={css`
                    font-weight: 400;
                    font-size: 16rem;
                    line-height: 20rem;
                    letter-spacing: 0%;
                    text-align: center;
                    color: #424144;
                    user-select: none;
                    pointer-events: none;
                `}
            >
                Thank you for verifying with us, please kindly wait up to 24 hours for us to process
                your request.
            </p>
            <MarginTopBlock top={56} />
            <ButtonRegular onClick={goHome}>Go To Homepage</ButtonRegular>
            <MarginTopBlock top={22} />
            <caption
                css={css`
                    font-size: 12rem;
                    line-height: 16rem;
                    letter-spacing: 0%;
                    color: #747378;
                    user-select: none;
                    pointer-events: none;
                `}
            >
                Automatically go to the home page at {countDownSeconds}s
            </caption>
        </div>
    )
}
